<template>
  <div id="" class="container" >
       <br />
    <h4 class="text-center">用户注册</h4>
    <br />
    <div v-if="register">
      <form action="">
      <div class="form-group">
        <label for="username">用户名:</label>&nbsp;
        <input
          type="text"
          v-model="username"
          class="form-control"
          id="username"
        />
      </div>
      <div class="form-group">
        <label for="password">密 码:</label>&nbsp;
        <input
          type="password"
          v-model="password"
          class="form-control"
          id="password"
        />
      </div>
       <div class="form-group">
        <label for="checkPassword">确认密码:</label>&nbsp;
        <input
          type="password"
          v-model="checkPassword"
          class="form-control"
          id="password"
        />
      </div>
      <div class="form-group">
        <button v-on:click="login()" class="btn btn-primary btn-block">
          返回登录
        </button>
      </div>
      <div class="form-group">
        <button @click="register()" class="btn btn-primary btn-block">
          注册
        </button>
      </div>
      <p style="color: red">{{ errorMessage }}</p>
      </form>
    </div>
    <!-- 后面可以考虑 注册完之后自动返回登录页面 -->
    <!-- <div v-else>
      <h6>
        欢迎你：{{ username }}！
        <button v-on:click="logout" class="btn btn-link float-right">
          退出
        </button>
      </h6>
      <br /><br />
      <p>
        <router-link to="/articles" class="btn btn-block btn-primary"
          >返回主页</router-link
        >
      </p>
    </div> -->
  
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      username: "",
      password: "",
      checkPassword: "",
      errorMessage: "",
    };
  },
  methods: {
    login() {
      this.$router.push("/login");
    },
    register() {
      this.$axios
        .post("/register", {
          username: this.username,
          password: this.password,
          checkPassword: this.checkPassword,
        })
        .then((response) => {
          if (response.data.success == true) {
            this.$router.push("/login");
          } else {
            this.errorMessage = response.data.msg;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style>
</style>